<template>
	<div class="order-price mt16">
		<div class="price-wrap">
			<img src="../../assets/images/g.png" alt="placeholder+image">
			<div class="price-c">
				固特异 EFF 215/50R17 91V固特异 EFF 215/50R17 91V固特异 EFF 215/50R17 91V固特异 EFF 215/50R17 91V…
			</div>
			<div class="price-r">
				<p>¥ 298.00</p>
				<span>×2</span>
			</div>
		</div>
		<div class="price-b">
			<p>应付金额</p>
			<span class="price">¥ 598.00</span>
		</div>
	</div>
		
</template>

<script type="text/javascript">
import Vue from 'vue';

export default {
	  methods: {
	  	
	  }
}
	

</script>


<style lang="scss">
	@import "../../assets/css/_functions.scss";	
	@import "../../assets/css/_variables.scss";	
	.order-price{
		width: rem(375);
		height: auto;
		overflow: hidden;
		background: #fff;
		.price-wrap{
			margin-left: rem(15);
			padding-right: rem(15);
			width: rem(360);
			border-bottom: rem(1) solid #dedede;
			padding:rem(15) rem(15) rem(15) 0;
			display: flex;
			justify-content:space-around ;
			img{
				width: rem(50);
				height: rem(50);
			}
			.price-c{
				width: rem(201);
				margin-left: rem(10);
				margin-right: rem(25);
				font-size:rem(14);
				color:#333333;
				letter-spacing:0px;
				line-height:rem(22);
				height: rem(43);
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2; 
				-webkit-box-orient: vertical; 
				text-overflow:ellipsis;

			}
			.price-r{
				text-align: right;
				font-size:rem(14);
				color:#333333;
				line-height: rem(22);
				letter-spacing:0px;
				text-align:right;
				span{
					color:#666666;
				}
			}
		}
		.price-b{
			display: flex;
			padding: 0 rem(15);
			justify-content:space-between;
			width: rem(375);
			height: rem(44);
			line-height: rem(44);
			font-size:rem(14);
			color:#333333;
			span{
				font-size:rem(12);;
				color:#ff0000;
			}

		}

	}
	
</style>